<template>
	<a-modal
		:visible="props.visible"
		:title="props.type === 'new' ? '新增线索' : '编辑线索'"
		:width="780"
		@cancel="emits('update:visible', false)"
		@ok="onSubmit"
		:confirmLoading="onLoading"
	>
		<a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '124px' } }">
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="线索名称" name="customerName">
						<!-- <a-input v-model:value="form.customerName"></a-input> -->
						<a-input-group compact>
							<a-form-item-rest>
								<a-select v-model:value="form.customerType" style="width: 84px">
									<a-select-option :value="1">企业</a-select-option>
									<a-select-option :value="2">自然人</a-select-option>
								</a-select>
							</a-form-item-rest>
							<a-input v-model:value="form.customerName" style="width: 150px"></a-input>
						</a-input-group>
					</a-form-item>
					<a-form-item label="线索等级" name="customerLevelId">
						<a-select v-model:value="form.customerLevelId" :options="levelOptions" @change="levelChange"></a-select>
					</a-form-item>
					<a-form-item label="所属地区">
						<area-select ref="areaSelectRef" :value="form.districtId" :name="form.district" />
					</a-form-item>
					<a-form-item label="注册日期">
						<a-date-picker
							v-model:value="form.regTime"
							valueFormat="YYYY-MM-DD"
							format="YYYY-MM-DD"
							placeholder="请选择"
							style="width: 234px"
						/>
					</a-form-item>
					<a-form-item label="联系人" name="contactPerson">
						<a-input v-model:value="form.contactPerson"></a-input>
					</a-form-item>
					<a-form-item label="职位" name="post">
						<a-input v-model:value="form.post"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="线索来源" name="customerFrom">
						<a-select
							v-model:value="form.customerFromId"
							:options="customerFromOptions"
							@change="fromChange"
						></a-select>
					</a-form-item>
					<a-form-item label="所属行业">
						<industry-select ref="industrySelectRef" :value="form.industryId" :name="form.industry" />
					</a-form-item>
					<a-form-item label="详细地址">
						<a-input v-model:value="form.customerAddress"></a-input>
					</a-form-item>
					<a-form-item label="手机" name="contactPhone">
						<a-input v-model:value="form.contactPhone"></a-input>
					</a-form-item>
					<a-form-item label="微信号" name="wxCode">
						<a-input v-model:value="form.wxCode"></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item label="备注">
				<a-textarea v-model:value="form.remark" :rows="4"></a-textarea>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script setup>
	import customerSourceApi from '@/api/biz/crm/customerSourceApi'
	import customerLevelApi from '@/api/biz/crm/customerLevelApi'
	import areaSelect from './areaSelect.vue'
	import industrySelect from './industrySelect.vue'
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		type: {
			type: String
		},
		callBack: {
			type: Function
		},
		info: {
			type: Object
		}
	})
	const emits = defineEmits(['update:visible', 'finished'])

	onBeforeMount(() => {
		if (props.type === 'new') {
			form.value = { ...defaultForm }
		} else {
			form.value.id = props.info.id
			form.value.customerType = [1, 2].indexOf(props.info.customerType) === -1 ? 1 : props.info.customerType
			form.value.customerName = props.info.customerName
			form.value.contactPerson = props.info.contactPerson
			form.value.contactPhone = props.info.contactPhone
			form.value.customerFrom = props.info.customerFrom
			form.value.customerFromId = props.info.customerFromId
			form.value.customerLevelId = props.info.customerLevelId
			form.value.customerLevelName = props.info.customerLevelName
			form.value.district = props.info.district
			form.value.customerAddress = props.info.customerAddress
			form.value.industry = props.info.industry
			form.value.industryId = props.info.industryId
			form.value.districtId = props.info.districtId
			form.value.remark = props.info.remark
			form.value.post = props.info.post
			form.value.wxCode = props.info.wxCode
			form.value.regTime = props.info.regTime
		}
	})
	/**
	 * 获取客户来源选项
	 */
	const customerFromOptions = ref([])
	customerSourceApi.list().then((res) => {
		customerFromOptions.value = res.map((item) => {
			return {
				value: item.id,
				label: item.name
			}
		})
	})
	/**
	 * 获取客户等级选项
	 */
	const levelOptions = ref([])
	customerLevelApi.list().then((res) => {
		levelOptions.value = res.map((item) => {
			return {
				value: item.id,
				label: item.name
			}
		})
	})
	/**
	 * 添加线索表单逻辑
	 */
	const defaultForm = {
		customerType: 1,
		customerName: undefined,
		contactPerson: undefined,
		contactPhone: undefined,
		customerFrom: undefined,
		customerFromId: undefined,
		customerLevelId: undefined,
		customerLevelName: undefined,
		district: undefined,
		customerAddress: undefined,
		industry: undefined,
		industryId: undefined,
		districtId: undefined,
		remark: undefined,
		post: undefined,
		wxCode: undefined,
		regTime: undefined
	}
	const form = ref({})
	const validatorPhone = async (rule, value) => {
		let reg = /^1[3456789]\d{9}$/
		if (value && !reg.test(value)) {
			return Promise.reject('请输入正确的手机号')
		} else {
			return Promise.resolve()
		}
	}
	const rules = {
		customerName: [{ required: true, message: '请输入线索名称', trigger: 'blur' }],
		customerFrom: [{ required: true, message: '请选择线索来源', trigger: 'change' }],
		// customerLevelId: [{ required: true, message: '请选择线索等级', trigger: 'change' }],
		contactPerson: [{ required: true, message: '请输入线索姓名', trigger: 'blur' }],
		post: [{ required: true, message: '请输入职位', trigger: 'blur' }],
		contactPhone: [
			{ required: true, message: '请输入手机号', trigger: 'blur' },
			{ validator: validatorPhone, trigger: 'blur' }
		]
	}

	const levelChange = (select, option) => {
		form.value.customerLevelId = select
		form.value.customerLevelName = option.label
	}
	const fromChange = (select, option) => {
		form.value.customerFromId = select
		form.value.customerFrom = option.label
	}
	const formRef = ref()
	const areaSelectRef = ref(null)
	const industrySelectRef = ref(null)
	const onLoading = ref(false)
	const onSubmit = () => {
		if (areaSelectRef.value.select && areaSelectRef.value.select.length > 0) {
			form.value.districtId = areaSelectRef.value.select.join(',')
			form.value.district = areaSelectRef.value.areaName
		}
		if (industrySelectRef.value.select) {
			form.value.industryId = industrySelectRef.value.select
			form.value.industry = industrySelectRef.value.industryName
		}
		formRef.value.validate().then(() => {
			onLoading.value = true
			props
				.callBack(form.value)
				.then(() => {
					onLoading.value = false
					emits('update:visible', false)
					emits('finished')
				})
				.finally(() => {
					onLoading.value = false
				})
		})
	}
</script>
<style lang="less" scoped>
	:deep(.ant-form-item-label > label) {
		white-space: initial;
		height: 36px;
	}
</style>
